<template>
  <div class="submit">
    <!-- 背景图 -->
    <img class="submit-bg" :src="bg" alt />
    <!-- 表单 -->
    <!-- <form action @submit.prevent="handleSubmit">
      <input type="text" placeholder="手机号" v-model="form.phone" />
      <input type="text" placeholder="收件人" v-model="form.consignee" />
      <br />
      <input type="text" placeholder="收货地址" v-model="form.address" />

      <input type="submit" value="提交" />
    </form>-->
    <van-form @submit="onSubmit" class="form">
      <van-field v-model="form.phone" name="手机号" :rules="[{ pattern, message: '请填写正确的手机号' }]"  />
      <van-field
        v-model="form.consignee"
        type="text"
        name="收件人"
      
        :rules="[{ required: true, message: '请填写收件人' }]"
      />
      <van-field
        v-model="form.address"
        type="text"
        name="地址"
        :rules="[{ required: true, message: '请填写地址' }]"
        
      />
      <div style="margin: 16px;" class="btn">
        <van-button  plain round block type="info" native-type="submit"></van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      bg:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/information.jpg",
      form: {
        phone: "",
        address: "",
        consignee: ""
      },
      // 手机正则
      pattern: /^[1]([3-9])[0-9]{9}$/
    };
  },
  methods: {
    //  handleSubmit() {
    //    const { phone, address, consignee } = this.form;
    //    console.log(phone, address, consignee);
    //  }

    onSubmit(values) {
      console.log("submit", values);
      this.form={
        phone: "",
        address: "",
        consignee: ""
      };
      Toast('提交成功！');

    }
  }
};
</script>
<style lang="less" scoped>
.submit {
  position: relative;
  width: 7.5rem;
  height: 13.91rem;

  .submit-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .form {
    position: absolute;
    bottom: 4.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7rem;

      .van-cell {
         right: 0.2rem;
      }

     .van-cell:nth-of-type(1) {
        top: 0.02rem;
     }

     .van-cell:nth-of-type(2) {
        top: 0.28rem;
     }

     .van-cell:nth-of-type(3) {
        top: 0.6rem;
     }

    .btn {
       position: relative;
       top: 2.2rem;
       left: 0;
    }
  }

  /deep/ .van-field__error-message {
     position: absolute;
     top: 0;
     left: 0.2rem;
     color: yellow;
  }

  /deep/.van-field__control {
     color: orange;
     font-size: 0.5rem;
     line-height: 0.5rem;

   //   border: 1px solid #fff;
  }

  /deep/ .van-cell {
     left: 2rem;
     top:-0.16rem;
     width: 50%;
     background: none;

  }

  .van-button--info {
     border: none;
     background: none;

  }

  .van-cell::after {
     border: none;
  }
}
</style>